//封装入口函数
$(function () {
  let layer = layui.layer;
  //需求1:初始化文字分类列表
  //因为后面还要用,所以封装成函数
  initArtCateList();
  //封装
  function initArtCateList() {
    axios({
      method: "GET",
      url: "/my/article/cates",
      //   因为定义了拦截器(headers信息都在里面),所以headers信息,不用重复写了
    }).then((res) => {
      //   console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      //成功后,渲染整个列表,并添加复制到tbody中
      //定义一个空数组
      let arr = [];
      //定义一个变量,做序号,循环一次自增+1
      let index = 0;
      res.data.data.forEach((ele) => {
        index++;
        arr.push(`
          <tr>
              <td>${index}</td>
              <td>${ele.name}</td>
              <td>${ele.alias}</td>
              <td>
                <button data-id="${ele.Id}" class="layui-btn layui-btn-xs btn-edit">
                  编辑
                </button>
                <button data-id="${ele.Id}"
                  class="btn-delete layui-btn layui-btn-xs layui-btn-danger"
                >
                  删除
                </button>
              </td>
            </tr>
          `);
      });
      //循环完成,赋值到tbody中
      $("tbody").empty().html(arr.join(""));
    });
  }

  //需求2:点击添加,显示对话框
  //定义添加分类对话框的索引值
  let index = 0;
  $("#btnAdd").on("click", function () {
    //给出弹窗
    index = layer.open({
      type: 1,
      title: "添加文章分类",
      area: ["500px", "300px"],
      content: `
      <!-- 1 -->
      <form class="layui-form" action="" id="formAdd">
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              required
              lay-verify="required"
              placeholder="请输入标题"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 2 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="alias"
              required
              lay-verify="required"
              placeholder="请输入标题"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 3 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
              确认添加
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      `,
    });
  });

  //需求3：添加文章分类
  //因为form表单是动态创建的,所以注册事件时,必须用事件委托
  $("body").on("submit", "#formAdd", function (e) {
    //阻止浏览器的默认行为
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
    }).then((res) => {
      //   console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      //成功后,提示信息,刷新页面
      layer.msg("恭喜您,添加文章分类成功!!");
      layer.close(index);
      initArtCateList();
    });
  });

  //需求4: 点击编辑按钮,展示对话框
  //因为编辑按钮是动态创建的,所以注册事件时,必须用事件委托
  //定义添加分类对话框的索引值
  let indexEdit = 0;
  let form = layui.form;
  $("tbody").on("click", ".btn-edit", function () {
    //给出弹窗
    indexEdit = layer.open({
      type: 1,
      title: "修改文章分类",
      area: ["500px", "300px"],
      content: `
          <form lay-filter="formEdit" class="layui-form" action="" id="formEdit">
          <!-- 0.方便提交修改设置的隐藏域 name = "Id"-->
            <input type="hidden" name="Id"
          <!-- 1 -->
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="name"
                  required
                  lay-verify="required"
                  placeholder="请输入标题"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <!-- 2 -->
            <div class="layui-form-item">
              <label class="layui-form-label">分类别名</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="alias"
                  required
                  lay-verify="required"
                  placeholder="请输入标题"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <!-- 3 -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">
                  确认修改
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
          `,
    });

    //需求5:展示当前的文字分类信息
    let id = $(this).attr("data-id");
    axios({
      method: "GET",
      //此处的 :id ,为动态参数,可以改变的;
      // : 必须省略,  :前面的/必须不能省略
      //   url: "/my/article/deletecate/:id",
      url: "/my/article/cates/" + id,
    }).then((res) => {
      console.log(res.data);
      //展示数据
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      //展示数据
      form.val("formEdit", res.data.data);
    });
  });

  //需求6:修改文章分类,完全复制的添加文章分类,修改内部数据
  //因为修改按钮是动态创建的,所以注册事件,必须用事件委托
  $("body").on("submit", "#formEdit", function (e) {
    //阻止浏览器的默认行为
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
    }).then((res) => {
      //   console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      //成功后,提示信息,刷新页面
      layer.msg("恭喜您,修改文章分类成功!!");
      layer.close(indexEdit);
      initArtCateList();
    });
  });

  //需求7:删除功能--事件委托功能,可以参考修改
  $("tbody").on("click", ".btn-delete", function () {
    //获取id  要写到弹窗之外
    let id = $(this).attr("data-id");
    //弹窗
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      axios({
        method: "GET",
        url: "/my/article/deletecate/" + id,
      }).then((res) => {
        //判断
        if (res.data.status !== 0) {
          return layer.msg(res.data.message);
        }
        //成功给提示
        layer.msg("恭喜您,删除文章分类成功!");
        //重新渲染页面
        initArtCateList();
      });
      //在axios处理函数外面关闭对话框
      layer.close(index);
    });
  });
});
